<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" :placeholder="$t('table.username')" v-model="listQuery.userName">
      </el-input>
      <el-select clearable style="width: 90px" class="filter-item" v-model="listQuery.userStatus" :placeholder="$t('table.status')" @change="handleFilter">
        <el-option v-for="item in statusOptions" :key="item.key" :label="item.label" :value="item.key">
        </el-option>
      </el-select>
      <el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.userType" :placeholder="$t('table.type')" @change="handleFilter">
        
        <el-option v-if="userId == '0'" v-for="item in  userTypeOptions" :key="item.key" :label="item.label" :value="item.key"></el-option>

        <el-option v-if="userId != '0'" v-for="item in  opUserTypeOptions" :key="item.key" :label="item.label" :value="item.key"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>

      <el-button class="filter-item" type="primary" v-waves icon="el-icon-refresh" @click="restQuery">{{$t('table.reset')}}</el-button>

      <el-button v-has="'userInfo_add'" class="filter-item" @click="handleCreate" type="primary" icon="el-icon-plus">新增用户</el-button>
    </div>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" :label="$t('table.showId')" width="65">
        <template slot-scope="scope">
          <span>{{scope.row.showId}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100px" align="center" :label="$t('table.username')">
        <template slot-scope="scope">
          <span>{{scope.row.userName}}</span>
        </template>
      </el-table-column>
      <el-table-column width="80px" align="center" :label="$t('table.type')">
        <template slot-scope="scope">
          <span class="link-type">{{scope.row.userType | typeFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" align="center" :label="$t('login.role')">
        <template slot-scope="scope">
          <span>{{scope.row.roleGroupName}}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" align="center" :label="$t('login.tel')">
        <template slot-scope="scope">
          <span>{{scope.row.tel}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100px" align="center" :label="$t('login.email')">
        <template slot-scope="scope">
          <span>{{scope.row.email}}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" align="center" :label="'交接人'">
        <template slot-scope="scope">
          <span>{{scope.row.authByName}}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" align="center" :label="$t('table.status')" width="80">
        <template slot-scope="scope">
          <el-tag :type="scope.row.userStatus | statusFilter">{{scope.row.userStatus | statusNameFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.actions')" width="500px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-has="'userInfo_edit'" type="primary" size="mini" @click="handleUpdate(scope.row)">{{$t('table.edit')}}</el-button>
          <el-button v-has="'userInfo_info'" type="info" size="mini" @click="handleInfo(scope.row,'info')">{{$t('table.info')}}</el-button>
          <el-button v-if="userId=='0' || userId==scope.row.id" v-has="'userInfo_resetPassword'" type="primary" size="mini" @click="handleRestPssword(scope.row)">{{$t('table.resetpass')}}</el-button>
          <el-button v-if="userId=='0' || userId==scope.row.id" type="info" size="mini" @click="handleAuthBy(scope.row)">交接人</el-button>
          <el-button v-has="'userInfo_role'" type="warning" size="mini" @click="handleAuth(scope.row)">权限</el-button>
          <el-button v-if="scope.row.id!='0' && (userId == 0 || (userType=='ADMIN' && scope.row.userType!='ADMIN')) && userType!='READER' && userType!='OP'" v-has="'userInfo_delete'" size="mini" type="danger" @click="handleDelete(scope.row,'deleted')">{{$t('table.delete')}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @current-change="handleCurrentChange" :current-page="page.page" :page-size="page.limit" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" top="2vh">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="100px" style='width: 400px; margin-left:50px;'>
        <el-form-item :label="$t('table.username')" prop="userName" v-if="dialogStatus !== 'resetpassword'">
          <span v-if="dialogStatus === 'info'">{{temp.userName}}</span>
          <el-input v-else v-model="temp.userName"></el-input>
        </el-form-item>
        <!-- <el-form-item :label="$t('table.status')" v-if="dialogStatus !== 'resetpassword'">
          <span v-if="dialogStatus === 'info'">{{temp.userStatus | statusNameFilter}}</span>
          <el-select v-else class="filter-item" v-model="temp.userStatus" placeholder="Please select">
            <el-option v-if="userId != '0'" v-for="item in  statusOptions" :key="item.key" :label="item.label" :value="item.key">
            </el-option>

            <el-option v-if="userId == '0'" v-for="item in  adminStatusOptions" :key="item.key" :label="item.label" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item :label="$t('login.username')" prop="loginName" v-if="dialogStatus !== 'update' && dialogStatus !== 'resetpassword'">
          <span v-if="dialogStatus === 'info'">{{temp.loginName}}</span>
          <el-input v-else v-model="temp.loginName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('login.password')" prop="password" v-if="dialogStatus === 'create' || dialogStatus === 'resetpassword'">
          <el-input v-model="temp.password" type="password"></el-input>
        </el-form-item>
        <el-form-item :label="$t('login.repassword')" prop="repassword" v-if="dialogStatus === 'create' || dialogStatus === 'resetpassword'">
          <el-input v-model="temp.repassword" type="password"></el-input>
        </el-form-item>
        <el-form-item :label="$t('login.tel')" prop="tel" v-if="dialogStatus === 'create' || dialogStatus === 'update'">
          <el-input v-model="temp.tel" type="tel"></el-input>
        </el-form-item>

        <el-form-item :label="$t('login.email')" prop="email" v-if="dialogStatus === 'create' || dialogStatus === 'update'">
          <el-input v-model="temp.email" type="email"></el-input>
        </el-form-item>
        <el-form-item :label="$t('table.type')" prop="userType" v-if="(dialogStatus !== 'update' && dialogStatus !== 'resetpassword') || userId=='0'">
          <span v-if="dialogStatus === 'info'">{{temp.userType | typeFilter}}</span>
          <el-select v-else class="filter-item" v-model="temp.userType" placeholder="Please select">
            <!-- <el-option v-for="item in  userTypeOptions" :key="item.key" :label="item.label" :value="item.key">
            </el-option> -->

            <el-option v-if="userId == '0'" v-for="item in  userTypeOptions" :key="item.key" :label="item.label" :value="item.key"></el-option>

            <el-option v-if="userId != '0'" v-for="item in  opUserTypeOptions" :key="item.key" :label="item.label" :value="item.key"></el-option>

          </el-select>
        </el-form-item>

        <el-form-item :label="$t('login.userStatus')" prop="userStatus" v-if="dialogStatus === 'update' && userId == '0' && temp.id!= '0'">
          <el-select class="filter-item" v-model="temp.userStatus" placeholder="Please select">
            <el-option v-for="item in  statusOptions" :key="item.key" :label="item.label" :value="item.key"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer" v-if="dialogStatus !== 'info'">
        <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
        <el-button v-else-if="dialogStatus=='resetpassword'" type="primary" @click="resetPassData">{{$t('table.confirm')}}</el-button>
        <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogRoleTreeVisible" width="50%" title="角色权限树">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-table ref="roleTable" :data="roleData" height="250" border style="width: 100%" @select="handdleRoleChoose">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="roleName" label="角色名称"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <el-scrollbar style="height:250px;">
            <el-tree :data="authData" show-checkbox node-key="id" ref="roleTree" highlight-current :props="defaultProps" :default-checked-keys="defaultCheckArray">
            </el-tree>
          </el-scrollbar>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRoleTreeVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="updateUserAuthData">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogAuthByVisible" width="50%" title="选择交接人">
      <el-table :key='tableKey' :data="authByUser" v-loading="authListLoading" element-loading-text="给我一点时间" border fit highlight-current-row
              @selection-change="handleSelectionChange"
              style="width: 100%">
        <el-table-column align="center" :label="'选择'" width="50">
          <template slot-scope="scope">
            <!-- <el-radio @change.native="getCurrentRow(scope.row)" :label="选择" v-model="authBySelected" class="textRadio" :key="scope.$index"></el-radio> -->
            <el-radio :label="scope.row.id" v-model="authBySelected" @change.native="chooseAuthBy">&nbsp;</el-radio>
          </template>
        </el-table-column>


        <el-table-column align="center" :label="$t('table.showId')" width="65">
          <template slot-scope="scope">
            <span>{{scope.row.showId}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户名">
          <template slot-scope="scope">
            <span>{{scope.row.userName}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('login.tel')">
          <template slot-scope="scope">
            <span>{{scope.row.tel}}</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination background @current-change="handleAuthByCurrentChange" :current-page.sync="authByPage.page" :page-size="authByPage.limit" layout="total, prev, pager, next, jumper" :total="authByTotal">
        </el-pagination>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAuthByVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="doAuthUser">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { fetchList, infoUser, createUser, deleteUser, updateUser, resetPass, updateUserAuth, infoUserAuth, fetchAuthUserList, doAuthUser } from '@/api/user/userInfo'
import { fetchSysRoleList, fetchMenuList } from '@/api/user/sysRole'
import waves from '@/directive/waves' // 水波纹指令
import { parseTime } from '@/utils'
import store from '@/store'

export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    /** 二次密码输入验证 */
    var valRepass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.temp.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      tableKey: 0,
      list: null,
      total: null,
      authByTotal: null,
      listLoading: true,
      authListLoading: true,
      roleData: [],
      authData: [],
      defaultCheckArray: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      page: {
        page: 1,
        limit: 20,
        sort: ''
      },
      authByPage: {
        page: 1,
        limit: 5,
        sort: ''
      },
      listQuery: {
        userName: undefined,
        userStatus: undefined,
        userType: undefined
      },
      userTypeOptions: [{ label: '管理员', key: 'ADMIN' }, { label: '普通成员', key: 'OP' }, { label: '审阅者', key: 'READER' }],
      opUserTypeOptions: [{ label: '普通成员', key: 'OP' }, { label: '审阅者', key: 'READER' }],
      statusOptions: [{ label: '正常', key: 'NORMAL' }, { label: '锁定', key: 'LOCK' }],
      adminStatusOptions: [{ label: '正常', key: 'NORMAL' }],
      dialogFormVisible: false,
      dialogRoleTreeVisible: false,
      dialogAuthByVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增',
        info: '详情',
        resetpassword: '重置密码'
      },
      temp: {
        userName: '',
        userType: 'OP',
        userStatus: 'NORMAL',
        loginName: '',
        password: '',
        repassword: '',
        tel: '',
        email: '',
        createById: '',
        createTime: new Date()
      },
      userAuthTemp: {
        id: '',
        roleGroup: '',
        routerNameGroup: '',
        authCodeGroup: ''
      },
      rules: {
        userType: [{ required: true, message: '请选择类型', trigger: 'change' }],
        userName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        loginName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }, { min: 6, max: 20, message: '长度在6-20之间' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }, { min: 6, max: 20, message: '长度在6-20之间' }],
        repassword: [{ required: true, message: '密码不能为空', trigger: 'blur' }, { trigger: 'blur', validator: valRepass }, { min: 6, max: 20, message: '长度在6-20之间' }],
        email: [{ pattern: /^[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/, message: '邮箱格式错误', trigger: 'blur' }],
        tel: [{ pattern: /^(1[3-9][0-9])\d{8}$/, message: '手机号格式错误', trigger: 'blur' }]
      },
      downloadLoading: false,
      authByUser: {},
      authBySelected: '',
      activeAuthRoleUser: '',
      activeAuthUser: '',
      userId: store.getters.userId,
      userType: store.getters.userType
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        NORMAL: 'success',
        LOCK: 'danger'
      }
      return statusMap[status]
    },
    statusNameFilter(status) {
      const statusMap = {
        NORMAL: '正常',
        LOCK: '锁定'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      const statusMap = {
        ADMIN: '管理员',
        OP: '普通成员',
        READER: '审阅者'
      }
      return statusMap[type]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.content.list
        this.total = response.content.total
        this.listLoading = false
      })
    },
    // 搜索按钮
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 跳转页数
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleAuthByCurrentChange(val) {
      const params = { userId: this.activeAuthUser, 'page.limit': 5, page: val }
      this.authListLoading = true
      fetchAuthUserList(params).then(response => {
        if (response.success) {
          // this.temp = Object.assign({}, response.content) // copy obj
          this.authListLoading = false
          this.authByUser = response.content.list
          this.authByTotal = response.content.total
          this.dialogStatus = status
          this.dialogAuthByVisible = true
        }
      })
    },
    // 详情
    handleInfo(row, status) {
      infoUser(row.id).then(response => {
        if (response.success) {
          this.temp = Object.assign({}, response.content) // copy obj
          this.temp.repassword = response.content.password
          this.dialogStatus = status
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        }
      })
    },
    handleAuthBy(row) {
      this.authByPage.page = 1
      this.authListLoading = true
      const params = { userId: row.id, 'page.limit': 5, page: 1 }
      // 清空上次选择的
      this.authBySelected = row.authById
      // 设置activeAuthUser
      this.activeAuthUser = row.id

      fetchAuthUserList(params).then(response => {
        if (response.success) {
          // this.temp = Object.assign({}, response.content) // copy obj
          this.authListLoading = false
          this.authByUser = response.content.list
          this.authByTotal = response.content.total
          this.dialogStatus = status
          this.dialogAuthByVisible = true
        }
      })
    },
    // 权限管理页面
    handleAuth(row) {
      this.userAuthTemp.id = row.id
      this.activeAuthRoleUser = row.id

      fetchSysRoleList({}).then(response => {
        if (response.success) {
          this.roleData = response.content
          var p = { parentId: '0' }
          fetchMenuList(p).then(response => {
            if (response.success) {
              this.authData = Object.assign([], response.content)
              infoUserAuth(row.id).then(response => {
                // 重置菜单树默认选中节点
                this.defaultCheckArray = []
                this.$refs.roleTable.clearSelection()
                if (response.success) {
                  if (response.content !== null) {
                    this.userAuthTemp = Object.assign([], response.content)
                    if (this.userAuthTemp.routerNameGroup !== null && this.userAuthTemp.routerNameGroup.length > 0) {
                      this.defaultCheckArray = this.userAuthTemp.routerNameGroup.split('#')
                    }
                    if (this.userAuthTemp.roleGroup !== null && this.userAuthTemp.roleGroup.length > 0) {
                      var roleArray = this.userAuthTemp.roleGroup
                      var checkRoleArray = this.roleData.filter((item, index, arr) => {
                        return roleArray.indexOf(item.id) !== -1 // 新数组为[3,4]
                      })
                      if (checkRoleArray) {
                        checkRoleArray.forEach(row => {
                          this.$refs.roleTable.toggleRowSelection(row)
                        })
                      }
                    }
                    this.$refs.roleTree.setCheckedKeys(this.defaultCheckArray)
                    console.log(this.defaultCheckArray)
                  }
                }
              })
            }
          })
        }
      })

      this.dialogRoleTreeVisible = true
    },
    // 角色筛选
    handdleRoleChoose(selection, row) {
      // console.log(selection)
      var checkArray = []
      var roleArray = []
      if (selection !== null && selection.length > 0) {
        for (var i = 0; i < selection.length; i++) {
          if (selection[i].routerNameGroup !== null && selection[i].routerNameGroup.length > 0) {
            checkArray = checkArray.concat(selection[i].routerNameGroup.split('#'))
            roleArray.push(selection[i].id)
          }
        }
      }
      console.log(checkArray)
      this.$refs.roleTree.setCheckedKeys(checkArray)
      this.userAuthTemp.roleGroup = roleArray.join('#')
    },
    // 组装树形数据
    // buildTreeCheckData() {
    //   const result = []
    //   this.$refs.roleTree.getCheckedKeys().forEach((item) => {
    //     var node = this.$refs.roleTree.getNode(item)
    //     if (node.parent) {
    //       // console.log(node.parent.data.id)
    //       result.push(node.parent.data.id)
    //       if (node.parent.parent) {
    //         // console.log(node.parent.parent.data.id)
    //         result.push(node.parent.parent.data.id)
    //       }
    //     }
    //     result.push(node.data.id)
    //   })
    //   return result
    // },
    updateUserAuthData() {
      const checkKey = this.$refs.roleTree.getCheckedKeys()
      this.userAuthTemp.routerNameGroup = Array.from(new Set(checkKey)).join('#')
      this.userAuthTemp.id = this.activeAuthRoleUser
      const tempData = Object.assign({}, this.userAuthTemp)
      tempData
      updateUserAuth(tempData).then(response => {
        if (response.success) {
          this.dialogRoleTreeVisible = false
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        }
      })
    },
    // 密码重置
    handleRestPssword(row) {
      infoUser(row.id).then(response => {
        if (response.success) {
          this.temp = Object.assign({}, response.content) // copy obj
          this.temp.repassword = ''
          this.temp.password = ''
          this.dialogStatus = 'resetpassword'
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        }
      })
    },
    // 提交更新
    resetPassData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = { id: this.temp.id, password: this.temp.password }
          resetPass(tempData).then(response => {
            if (response.success) {
              this.getList()
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }
          })
        }
      })
    },
    resetTemp() {
      this.temp = {
        userName: '',
        userType: 'OP',
        userStatus: 'NORMAL',
        loginName: '',
        password: '',
        repassword: '',
        tel: '',
        email: ''
      }
    },
    // 打开新增dialog
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 新增数据post
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          createUser(this.temp).then(() => {
            this.getList()
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 更新页面
    handleUpdate(row) {
      infoUser(row.id).then(response => {
        this.temp = Object.assign({}, response.content) // copy obj
        this.temp.repassword = this.temp.password
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      })
    },
    // 提交更新
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          updateUser(tempData).then(response => {
            if (response.success) {
              this.getList()
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }
          })
        }
      })
    },
    // 删除操作
    handleDelete(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用删除接口
        var p = { id: row.id }
        deleteUser(p).then(response => {
          if (response.success) {
            this.getList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    restQuery() {
      this.listQuery.userName = ''
      this.listQuery.userStatus = ''
      this.listQuery.userType = ''
      this.getList()
    },
    handleSelectionChange() {

    },
    chooseAuthBy() {

    },
    doAuthUser() {
      // 选中的对接人
      // this.authBySelected = ''
      // 打开的用户
      // this.activeAuthUser = row.id

      this.$confirm('此操作会将您添加过的数据同时展示给选中的用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogAuthByVisible = false
        // 调用删除接口
        var p = { userId: this.activeAuthUser, authByUserId: this.authBySelected }
        doAuthUser(p).then(response => {
          if (response.success) {
            this.getList()
            this.$message({
              type: 'success',
              message: '交接数据成功!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>
